<template>
	<div id="login">
		<form>
			<div>
				<input type="text" name="username" placeholder="手机号" v-model="tel">
			</div>
			<div>
				<input type="text" name="password" placeholder="密码" v-model="psw"><br/>
				<em v-show="req">*用户或密码错误</em>
			</div>
			<span class="button" @click="login()">登入
				<i v-show="icon"></i>
			</span>			
		</form>
	</div>
</template>

<script>
export default {
	name: "Login",
	data: function() {
		return {
			tel:"",
			psw:"",
			req:false,
			icon:false,
		}
	},
	methods:  {
		// ...mapActions(['signIn']),
		signIn(user) {
			this.$store.dispatch('signIn',user)
		},
		login() {
			this.icon = true;
			this.req = false;
			setTimeout(() => {
				this.signIn({
					tel:this.tel,
					psw:this.psw
				});
				
				if(sessionStorage.login && sessionStorage.login == 1) {
					console.log('aa');
                    this.$router.replace('/address');
                    this.icon = false;
                } else {
                	this.icon = false;
                    this.req = true;
                }
			},1500)
		},
	}
}
</script>

<style>
#login {
	text-align: center;
}
#login input {
	width: 220px;
	height: 30px;
	margin: 3px;
	padding: 0px 5px;
	box-sizing: border-box;
}
#login .button {
	display: inline-block;
	width: 220px;
	height: 30px;
	line-height: 30px;
	margin-top: 10px;
	background: #3385ff;
	border: none;
	outline: none;
	font-size: 16px;
	color: #333;
	cursor: pointer;
}
#login i {
	padding-left: 20px;
	background: url("../../static/img/process.png");
	background-size: 100%;
}

#login em {
	color: #E10601;
	font-size: 12px;
}
</style>